<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试公司信息资源管理系统</title>
<link rel="stylesheet" type="text/css" media="all" href="{%$css_path%}global.css" />
<link rel="stylesheet" type="text/css" media="all" href="{%$css_path%}style.css" />
<link rel="stylesheet" type="text/css" media="all" href="{%$css_path%}com.css" />
<script type="text/javascript" src="{%$js_path%}jquery.js"></script>
<script type="text/javascript" src="{%$js_path%}menu.js"></script>
<script type="text/javascript" src="{%$js_path%}validator.js"></script>

<!-- import jquery ui -->
<!--<link rel="stylesheet" type="text/css" href="{%$js_path%}ui/jquery-ui-1.8.16.custom.css">-->
<script type="text/javascript" src="{%$js_path%}ui/jquery-ui-1.8.16.custom.min.js"></script>
<!-- ui end -->

<!-- private css and js * start -->
<link rel="stylesheet" type="text/css" href="{%$js_path%}grid/jquery-ui-1.8.2.custom.css">
<link rel="stylesheet" type="text/css" href="{%$js_path%}grid/ui.jqgrid.css">
<script type="text/javascript" src="{%$js_path%}grid/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="{%$js_path%}grid/jquery.jqGrid.min.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="{%$css_path%}week.css" />

<script type="text/javascript">
$(document).ready(function(){
	$("#list").jqGrid({
		url: 'data_json.php', //显示的数据
		editurl: 'data_json.php?opt=1',
		datatype: 'json', //xml、json、local(js直接赋值)
		mtype: 'GET',
		colNames: ['序号(Item)', '井队名(Rig Name)',  '井名(Well Name)', '作业类别(Type)', '人工井底深度(PTD)', '套管深度(CTD)', '作业计划(Testing Program)', '下一井名(Next Well)', '备注(Remarks)'], //表头标题别名
		colModel: [ //shrinkToFit 
			{name: 'id', index: 'id', width: 65, align: 'center',fixed:true,searchoptions:{sopt: ['eq','ne']}},
			{name: 'userName', index: 'userName', width: 90,fixed:true,editable:true,editrules:{required:true},formoptions:{elmprefix:'(*)'}},
			{name: 'invdate', index: 'invdate', width: 100,fixed:true,editable:true,searchoptions:{sopt: ['eq','ne']},formoptions: { label: '日期' },editoptions:{size:12,dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})} }},
			{name: 'amount', index: 'amount', width: 100, align: 'right',editable:true,search:false, edittype:'select', editoptions:{value:{1:'One',2:'Two'}}},
			{name: 'tax', index: 'tax', width: 100,sortable:false, align: 'right',search:false},
			{name: 'total', index: 'total', width: 90, align: 'right',editable:true,editrules:{number:true},editoptions:{readonly:true,size:5}},
			{},
			{},
			{name: 'remarks', index: 'remarks', width: 140, sortable:false,editable:true,edittype: 'textarea',search:false}
		],
		// JSON
		jsonReader: { 
			root: "list_data", 
			page: "page", 
			total: "total", 
			records: "records", 
			repeatitems: false,   //注：cell、id在repeatitems为true时可以用到，即每一个记录是由一对id和cell组合而成，即可以适用另一种json结构 
			cell: "cell", 
			id: "id",
			userdata: "userdata", 
			//subgrid: {root:"rows", repeatitems: true, cell:"cell" } 
		},
		//loadComplete: function(){alert('load Complete!');},		
		//width: 600,
		height:200,//整个显示的最大高度
		autowidth:true,
		shrinkToFit:false, //水平滚动条
		pager: $('#pager'),
		nowNum: 5,
		rowNum: 5,
		//rowList:[5, 10,20,30],
		sortname: 'id',
		//sortorder: "desc",
		viewrecords: true,
		//imgpath: '{%$js_path%}jq/grid/images',
		//caption: 'My firest grid' //注释为不显示标题栏
	});
	
	$("#list").navGrid("#pager", {
			refresh: true,
			edit: true,
			add: true,
			del:true,
			search: true,
			//searchtext:'查找',
			position: "left"
		},{
			height:280,reloadAfterSubmit:false,closeOnEscape:true, closeAfterEdit: true
			//checkOnSubmit:false,recreateForm:true,beforeInitData:function(formid){initComparator();}
		}, // edit options
		{height:280,reloadAfterSubmit:true,closeAfterAdd: true}, // add options
		{mtype:"GET",reloadAfterSubmit: true}, // del options
		{multipleSearch:false,closeOnEscape:true,closeAfterSearch: true} // search options	
	);
	
	$("#list2").jqGrid({
		url: 'data_json.php', //显示的数据
		editurl: 'data_json.php?opt=1',
		datatype: 'json', //xml、json、local(js直接赋值)
		mtype: 'GET',
		colNames: ['Inv No', '用户名',  'Date', 'Amount', 'Tax', 'Total', 'Notes'], //表头标题别名
		colModel: [ //shrinkToFit 
			{name: 'id', index: 'id', width: 55, align: 'center',searchoptions:{sopt: ['eq','ne']}},
			{name: 'userName', index: 'userName', width: 80,editable:true,editrules:{required:true},formoptions:{elmprefix:'(*)'}},
			{name: 'invdate', index: 'invdate', width: 90,editable:true,searchoptions:{sopt: ['eq','ne']},formoptions: { label: '日期' },editoptions:{size:12,dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})} }},
			{name: 'amount', index: 'amount', width: 80, align: 'right',editable:true,search:false, edittype:'select', editoptions:{value:{1:'One',2:'Two'}}},
			{name: 'tax', index: 'tax', width: 80, align: 'right',search:false},
			{name: 'total', index: 'total', width: 80, align: 'right',editable:true,editrules:{number:true},editoptions:{size:5}},
			{name: 'note', index: 'notes', width: 120, sortable:false,editable:true,edittype: 'textarea',search:false}
		],
		///* JSON
		jsonReader: { 
			root: "list_data", 
			page: "page", 
			total: "total", 
			records: "records", 
			repeatitems: false,   //注：cell、id在repeatitems为true时可以用到，即每一个记录是由一对id和cell组合而成，即可以适用另一种json结构 
			cell: "cell", 
			id: "id",
			userdata: "userdata", 
			//subgrid: {root:"rows", repeatitems: true, cell:"cell" } 
		},
		//loadComplete: function(){alert('load Complete!');},		
		//width: 700,
		height:200,//整个显示的最大高度
		shrinkToFit:false, //水平滚动条
		pager: $('#pager2'),
		nowNum: 5,
		rowNum: 5,
		rowList:[5, 10,20,30],
		sortname: 'id',
		//sortorder: "desc",
		//scrollrows: false, //是否显示滚动条
		viewrecords: true,
		//imgpath: '{%$js_path%}jq/grid/images',
		//caption: '表二'
	});
	
	$("#list2").navGrid("#pager2", {
			refresh: true,
			edit: true,
			add: true,
			del:true,
			search: true,
			//searchtext:'查找',
			position: "left"
		},{
			height:280,reloadAfterSubmit:false,closeOnEscape:true, closeAfterEdit: true
			//checkOnSubmit:false,recreateForm:true,beforeInitData:function(formid){initComparator();}
		}, // edit options
		{height:280,reloadAfterSubmit:true,closeAfterAdd: true}, // add options
		{mtype:"GET",reloadAfterSubmit: true}, // del options
		{multipleSearch:false,closeOnEscape:true,closeAfterSearch: true} // search options	
	);
});

</script>

<!-- private css and js * end -->
</head>
<body>

<div class="jqgrid_wrap">
	<div class="jqgrid_chunk">
		<table id="list" class="scroll"></table>
		<div id="pager" class="scroll" style="text-align:center;"></div>
	</div>
	<br/>
	<br/>
	<div class="jqgrid_chunk">
		<table id="list2" class="scroll"></table>
		<div id="pager2" class="scroll" style="text-align:center;"></div>
	</div>
</div>


</body>
</html>